Ext.require(['Ext.chart.*', 'Ext.data.JsonStore', 'Ext.Date']);
//Ext.require(['Ext.chart.*', 'Ext.data.JsonStore']);

(function(vvg){
   
   vvg.app = vvg.app || {};
   var app = vvg.app;
   
   var displayFields = ['data1', 'data2', 'data3'];
   var displaySeries = [];
   for(var i = 0; i < displayFields.length; i++){
      displaySeries.push({
         type: 'line',
         highlight: {
            size: 7,
            radius: 7
         },
         axis: 'left',
         xField: 'name',
         yField: displayFields[i],
         markerConfig: {
            type: 'cross',
            size: 4,
            radius: 4,
            'stroke-width': 0
         }         
      });
   }

   
   Ext.define('VVG.view.ChartView', {
      extend: 'Ext.chart.Chart',
      alias : 'widget.chartview',
      requires: ['Ext.chart.*', 'Ext.data.JsonStore', 'Ext.Date'],
      title : 'Water Levels',
      store: 'ChartData'
      
      ,initComponent: function() {
         
         this.style = 'background:#fff';
         this.animate = true;
         this.shadow = true;
         this.theme = 'Category1';
         this.legend = {
            position: 'right'
         };
         
         this.axes = [{
            type: 'Numeric',
            minimum: 0,
            position: 'left',
            fields: displayFields,
            title: 'Number of Hits',
            minorTickSteps: 1,
            grid: {
               odd: {
                  opacity: 1,
                  fill: '#ddd',
                  stroke: '#bbb',
                  'stroke-width': 0.5
               }
            }
         }
         ,{
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Month of the Year'
         }];
      
         this.series = displaySeries;

         this.callParent(arguments);
      }
   });
   
}(window.vvg = window.vvg || {}));
